<!--@ 用户信息-->
<template>
	<view class="padding-lr padding-bottom-xl">
		<load-flex :loading="loading"></load-flex>
		<u-notify ref="uNotify" />
		<!-- 表单部分 -->
		<view class="text-black" style="padding-bottom: 100rpx;">
			<uni-forms ref="valiForm" :rules="rulesFrom" :modelValue="model" labelWidth="375px" label-position="top">
				<uni-forms-item label="客户姓名" required name="customerName">
					<uni-easyinput :disabled="showPrimitive" v-model="model.customerName" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="性别" required name="sex">
					<uni-data-checkbox mode="button" :disabled="showPrimitive" v-model="model.sex" :localdata="sexArr"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item label="年龄" required name="age">
					<uni-easyinput :disabled="showPrimitive" v-model="model.age"  type="number" :maxlength="3" placeholder="请输入年龄" />
				</uni-forms-item>
				<uni-forms-item label="生肖属相" required name="zodiac">
					<uni-easyinput :disabled="showPrimitive" v-model="model.zodiac" placeholder="请输入生肖属相" />
				</uni-forms-item>
				<uni-forms-item label="现居住地址" required name="address">
					<uni-easyinput :disabled="showPrimitive" v-model="model.address" placeholder="请输入现居住地址" />
				</uni-forms-item>
				<uni-forms-item label="最高学历" required name="education">
					<uni-easyinput :disabled="showPrimitive" v-model="model.education" placeholder="请输入最高学历" />
				</uni-forms-item>
				<uni-forms-item label="最高学历学校名称" required>
					<uni-easyinput :disabled="showPrimitive" v-model="model.educationSchool" placeholder="请输入最高学历学校名称" />
				</uni-forms-item>
				<uni-forms-item label="身份证号" required name="cardId">
					<uni-easyinput :disabled="showPrimitive" v-model="model.cardId" placeholder="请输入身份证号" />
				</uni-forms-item>
				<uni-forms-item label="身份证户籍地址(填写完整)" required name="residenceAddress">
					<uni-easyinput :disabled="showPrimitive" type="textarea" v-model="model.residenceAddress" placeholder="请输入身份证户籍地址" />
				</uni-forms-item>
				<uni-forms-item label="预留手机号" required name="phone">
					<uni-easyinput :disabled="showPrimitive" v-model="model.phone" type="number" :maxlength="11" placeholder="请输入预留手机号" />
				</uni-forms-item>
				<uni-forms-item label="逾期真实原因" required name="expectedRealReasons">
					<uni-easyinput :disabled="showPrimitive" type="textarea" v-model="model.expectedRealReasons" placeholder="请输入逾期真实原因" />
				</uni-forms-item>
				<uni-forms-item label="预留单位名称">
					<uni-easyinput v-model="model.reservedJobName" :disabled="showPrimitive" placeholder="请输入预留单位名称" />
				</uni-forms-item>
				<uni-forms-item label="预留单位地址" >
					<uni-easyinput :disabled="showPrimitive" type="textarea" v-model="model.reservedJobAddress" placeholder="请输入预留单位地址" />
				</uni-forms-item>
				<uni-forms-item label="计划还款周期">
					<uni-easyinput :disabled="showPrimitive" type="textarea" v-model="model.repaymentRemarks"
						placeholder="请输入打算多久结清欠款或计划每个月拿出多少自己去偿还此笔款项？"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="现工作单位名称" >
					<uni-easyinput :disabled="showPrimitive" v-model="model.currentJobName" placeholder="请输入现工作单位名称" />
				</uni-forms-item>
				
				<uni-forms-item label="现工作单位详细地址" >
					<uni-easyinput :disabled="showPrimitive" type="textarea" v-model="model.currentJobAddress" placeholder="请输入现工作单位详细地址" />
				</uni-forms-item>
				<uni-forms-item label="紧急联系人姓名(1)" >
					<uni-easyinput :disabled="showPrimitive" v-model="model.emergencyContactNameOne" placeholder="请输入紧急联系人姓名" />
				</uni-forms-item>
				<uni-forms-item label="紧急联系人电话(1)">
					<uni-easyinput :disabled="showPrimitive" v-model="model.emergencyContactPhoneOne" type="number" :maxlength="11"
						placeholder="请输入紧急联系人电话" />
				</uni-forms-item>
				<uni-forms-item label="紧急联系人关系(1)" >
					<uni-easyinput :disabled="showPrimitive" v-model="model.emergencyContactRelationshipOne" placeholder="请输入紧急联系人关系" />
				</uni-forms-item>
				<uni-forms-item label="紧急联系人姓名(2)">
					<uni-easyinput :disabled="showPrimitive" v-model="model.emergencyContactNameTwo" placeholder="请输入紧急联系人姓名" />
				</uni-forms-item>
				<uni-forms-item label="紧急联系人电话(2)">
					<uni-easyinput :disabled="showPrimitive" v-model="model.emergencyContactPhoneTwo" type="number" :maxlength="11"
						placeholder="请输入紧急联系人电话" />
				</uni-forms-item>
				<uni-forms-item label="紧急联系人关系(2)">
					<uni-easyinput :disabled="showPrimitive" v-model="model.emergencyContactRelationshipTwo" placeholder="请输入紧急联系人关系" />
				</uni-forms-item>
				
			</uni-forms>
			<view class="cu-bar bg-white tabbar border shop"
				style="position: fixed;bottom: 0;left: 0;width: 100%; z-index: 9999;">
				<view class="btn-group">
					<button class="cu-btn bg-red round shadow-blur" v-if="!showPrimitive"  @click="handeReset()">重 置</button>
					<button class="cu-btn bg-tnant3 round shadow-blur" @click="loadData">下一步</button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import loadFlex from '@/components/loadFlex/loadFlex.vue' //加载框
	import myApi from '@/utils/app.js' //调用接口使
	export default {
		components: {
			loadFlex
		},
		name: 'userNameFrom',
		
		data() {
			return {
				sexArr: [{
						text: '男',
						value: '0'
					},
					{
						text: '女',
						value: '1'
					}
				],
				rulesFrom: {
					customerName: {
						rules: [{
							required: true,
							errorMessage: '客户姓名不能为空'
						}]
					},
					address:{
						rules: [{
							required: true,
							errorMessage: '现居住地址'
						}]
					},
					age: {
						rules: [{
							required: true,
							errorMessage: '年龄不能为空'
						}]
					},
					zodiac: {
						rules: [{
							required: true,
							errorMessage: '生肖属相不能为空'
						}]
					},
					education: {
						rules: [{
							required: true,
							errorMessage: '最高学历不能为空'
						}]
					},
					cardId:{
						rules: [{
							required: true,
							errorMessage: '请输入身份证号'
						}]
					},
					residenceAddress: {
						rules: [{
							required: true,
							errorMessage: '身份证户籍地址不能为空'
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '手机号不能为空'
						}]
					},
					expectedRealReasons: {
						rules: [{
							required: true,
							errorMessage: '逾期真实原因不能为空'
						}]
					},
					repaymentRemarks: {
						rules: [{
							required: true,
							errorMessage: '计划还款周期不能为空'
						}]
					},
					expectedRealReasons: {
						rules: [{
							required: true,
							errorMessage: '逾期真实原因不能为空'
						}]
					},
					educationSchool:{
						rules: [{
							required: true,
							errorMessage: '最高学历学校名称不能为空'
						}]
					}
				},
				model: {
					sex:'1'
				},
				loading: false,
				showPrimitive:false
			}
		},
		props: {
			ageSync: {
				type: Object,
				default: () => {}
			},
			dataPrimitive:{
				type: Object,
				default: () => {}
			}
		},
		 watch: {
		    ageSync: {
		      handler(val) {
			
		        if(val && val.data && val.data[0] && val.data[0]!=null ){
					this.model = val.data[0]
				}
		      },
		      immediate: true
		    },
			dataPrimitive: {
			  handler(val) {
				  console.log(val,'333332222222222')
				  this.showPrimitive = false
			    if(val && val.customerInfo && val.customerInfo.id){
					this.showPrimitive = true
					this.model = val.customerInfo
				}
			  },
			  immediate: true
			}
		  },
		methods: {
			async loadData() {
				
				
				
				
				this.$refs.valiForm.validate()
					.then(res => {
						this.$emit('onUserName', this.model)
					})
					.catch(err => {
						this.onNotify({
							type: 'error',
							message: err[0].errorMessage
						})
					})
			},
			handeReset() {
				// 重置
				this.model = {}
				this.time = new Date().valueOf()
			},
			onNotify(round) {
				this.$refs.uNotify.show({
					type: round.type ? round.type : 'success',
					message: round.message ? round.message : '删除成功',
					top: 50
				})
			}
		}
	}
</script>

<style></style>